<script>
  let request = loadData()

  /**
   * 开始网络请求
   */
  async function loadData() {
    const res = await sleep()
    return res
  }
  /**
   * 模拟网络请求
   */
  function sleep() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const count = Math.ceil(Math.random() * 10)
        count % 2 ? resolve(count) : reject('error')
      }, 2e3)
    })
  }

  function handleClick() {
    request = loadData()
  }
</script>

<button on:click={handleClick}>开始网络请求</button>
{#await request}
  <p>loading....</p>
{:then name}
  <p>value的值是：{name}</p>
{:catch}
  <p>哎呀出错了</p>
{/await}
<!-- {#await request catch name}
  出错了{name}
{/await} -->
